<template>
  <div v-loading="loading">
    <el-row :gutter="20" class="gl_searchBox" style="margin: 0 0 15px 0;">
      <el-col :span="6" :lg="4">
        <p>科目</p>
        <el-select v-model="form.SubjectId" size="mini" placeholder="请选择科目" filterable @change="getList()">
          <el-option label="全部" value="" />
          <el-option v-for="item in subjectList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-col>
      <el-col :span="6" :lg="4">
        <p>手机号/姓名</p>
        <el-input v-model="form.Filter" placeholder="请输入手机号/姓名查询" size="mini" clearable @change="getList()" />
      </el-col>
      <el-col :span="9" :lg="14" align="right" class="search_btn">
        <el-button type="primary" size="mini" @click="getList()">查询</el-button>
        <el-button type="warning" size="mini" @click="initForm()">重置</el-button>
      </el-col>
      <el-col :span="3" :lg="2" align="right" class="search_btn">
        <el-button type="success" size="mini" @click="exportData()">导出人员表</el-button>
      </el-col>
    </el-row>

    <el-row v-if="false" class="gl_fs_14 gl_mb_5" style="color: #595959">
      <el-col align="right">共计 11 条数据</el-col>
    </el-row>
    <el-table class="gl_table_noBorder gl_mb_15" :data="tableData" stripe size="mini">
      <el-table-column type="index" label="序号" align="center" :width="50" />
      <el-table-column label="头像" align="center" :width="60">
        <template slot-scope="{ row }">
          <img class="people_coverimg" :src="getStaticPhotoUrl(row.trainningRegister.imagePath)" alt="" @error="errorPhoto">
        </template>
      </el-table-column>
      <el-table-column label="参训姓名" :width="120">
        <template slot-scope="{ row }">
          {{ row.trainningRegister.name }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" :width="100">
        <template slot-scope="{ row }">
          {{ row.register.phoneNumber }}
        </template>
      </el-table-column>
      <el-table-column prop="idCardNumber" label="证件号码" :width="140">
        <template slot-scope="{ row }">
          {{ row.trainningRegister.idCardNumber }}
        </template>
      </el-table-column>
      <el-table-column label="培训科目" :min-width="160">
        <template slot-scope="{ row }">
          <span v-for="item in row.subjects" :key="item.id" class="gl_dis_ib">
            <template v-if="item.subjectTypeCode =='Train'">
              <span>{{ item.name }}；</span>
            </template>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="考试科目" :min-width="160">
        <template slot-scope="{ row }">
          <span v-for="item in row.subjects" :key="item.id" class="gl_dis_ib">
            <template v-if="item.subjectTypeCode =='Exam'">
              <span>{{ item.name }}；</span>
            </template>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="trainningRegister.membershipFee.name" label="会员类型" :width="100" />
      <el-table-column label="会员年限" :width="80">
        <template slot-scope="{ row }">
          <p>{{ row.trainningRegister.membershipFeeYear ? row.trainningRegister.membershipFeeYear + '年' : '' }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="trainningRegister.hotel.name" label="入住酒店" :min-width="120" />
      <el-table-column label="酒店备注" :width="100">
        <template slot-scope="{ row }">
          <p>{{ row.trainningRegister.hotel && row.trainningRegister.hotel.comment || '- -' }}</p>
        </template>
      </el-table-column>
      <el-table-column label="金额" :min-width="160">
        <template slot-scope="{ row }">
          <span v-for="(item, index) in row.entryOrder.charges" :key="index" class="gl_pr_15 gl_dis_ib">
            <span>{{ item.name + ' ' }}</span>
            <span>{{ (item.categoryAmount / 100).toFixed(2) }}元</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="text-align: right;" class="gl_pb_15 gl_mr_15">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="form.MaxResultCount"
        :current-page="form.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>

<script>
import defaultPhoto from '@/assets/images/face_default.png';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import { Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO } from '@/lib/form/train/swaggerForm';
import {
  api_GET_TrainSubject, // 获取科目列表
  api_GET_TrainTrainningEntryApprovalTrainningEntryApprovals // 获取表格数据
} from '@/extend/api/trainswaggerApi/app';
export default {
  name: 'Personnel',
  data() {
    return {
      defaultPhoto: defaultPhoto,
      loading: false,
      subjectList: [], // 科目列表
      form: new Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO(),
      tableData: [],
      total: 0
    };
  },
  created() {
    this.trainId = this.$route.params.id;
    this.getSubjectList();
    this.initForm();
  },
  methods: {
    // 初始化
    initForm() {
      this.form = new Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO();
      this.getList();
    },
    // 获取科目列表
    getSubjectList() {
      var that = this;
      const form = {
        trainningId: that.trainId
      };
      api_GET_TrainSubject(form).then(res => {
        // 培训科目 + 考试科目
        that.subjectList = res.trainSubjects.concat(res.examSubjects);
      }, (error) => {
        that.$message({ type: 'error', message: '获取科目失败！' + (error.error && error.error.message || '') });
      });
    },
    // 获取列表数据
    getList(page) {
      this.form.Page = page || 1;
      this.form.SkipCount = (this.form.Page - 1) * this.form.MaxResultCount;
      this.form.TrainningId = this.trainId;
      this.form.IncludeSourceRegister = true; // 原始会员
      this.form.IncludeTrainningRegister = true; // 培训报名信息
      this.form.IncludeSubjects = true; // 科目列表
      this.form.IncludeOrderDetail = true; // 订单明细
      this.form.IncludeNotApproved = false; // 审核成功
      // this.form.IncludeTrainning = true; // 培训
      this.loading = true;
      api_GET_TrainTrainningEntryApprovalTrainningEntryApprovals(this.form).then(res => {
        this.loading = false;
        this.tableData = res.items || [];
        this.total = res.totalCount;
      }, (error) => {
        this.loading = false;
        this.$message({ type: 'error', message: '获取数据失败！' + (error.error && error.error.message || '') });
      });
    },
    exportData() {
      var that = this;
      this.buLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '人员表' + '.xlsx';
      const params = {};
      params.ReportName = 'TrainningRegister';
      params.TrainningId = this.trainId;
      params.SubjectId = this.form.SubjectId;
      params.Filter = this.form.Filter;
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, params, WEB_CONFIG.VUE_APP_SWAGGER_TRAIN_BASE).then(res => {
        that.buLoading = false;
      }).catch(error => {
        that.buLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
    },
    changePage(page) {
      this.getList(page);
    },
    changePageSize(pagesize) {
      this.form.MaxResultCount = pagesize;
      this.getList();
    }
  }
};
</script>

<style scoped>
.people_coverimg {
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
}
img {
  width: 100%;
  height: 100%;
}
</style>
